import { SERVICES } from '@/common';
import { history } from '@umijs/max';
import { Card } from 'antd';
import React from 'react';
import styles from './index.less';

export interface IOrderProps {
	dataSource: any;
	[key: string]: any;
}

const OrderDetail: React.FC<IOrderProps> = ({ dataSource }) => {
	return (
		<div className={styles.box}>
			<Card>
				<section
					className={styles.section_box}
					onClick={() => {
						history.push('/detail/' + dataSource?.user?.id, dataSource?.user?.type || 'user');
					}}
				>
					<h3>用户信息</h3>
					<section className={styles.message}>
						<div className={styles.message_item}>
							<div className={styles.message_item_title}>头像</div>
							<div className={styles.message_item_image}>
								<img src={SERVICES + dataSource?.user?.cover} alt="" />
							</div>
						</div>
						<div className={styles.message_item}>
							<div className={styles.message_item_title}>姓名</div>
							<div className={styles.message_item_info}>{dataSource?.user?.name || '-'}</div>
						</div>
						<div className={styles.message_item}>
							<div className={styles.message_item_title}>昵称</div>
							<div className={styles.message_item_info}>{dataSource?.user?.nickname || '-'}</div>
						</div>
					</section>
				</section>
				<section
					className={styles.section_box}
					onClick={() => {
						history.push('/detail/' + dataSource?.car?.id, dataSource?.car?.type || 'car');
					}}
				>
					<h3>车辆信息</h3>
					<section className={styles.message}>
						<div className={styles.message_item}>
							<div className={styles.message_item_title}>图片</div>
							<div className={styles.message_item_image}>
								<img src={SERVICES + dataSource?.car?.photos?.[0]?.url || ''} alt="" />
							</div>
						</div>
						<div className={styles.message_item}>
							<div className={styles.message_item_title}>车牌号</div>
							<div className={styles.message_item_info}>{dataSource?.car?.license_plate}</div>
						</div>
						<div className={styles.message_item}>
							<div className={styles.message_item_title}>品牌</div>
							<div className={styles.message_item_info}>{dataSource?.car?.brand}</div>
						</div>
					</section>
				</section>

				<section
					className={styles.section_box}
					onClick={() => {
						history.push(
							'/detail/' + dataSource?.service?.id,
							dataSource?.service?.type || 'service',
						);
					}}
				>
					<h3>服务信息</h3>
					<section className={styles.message}>
						<div className={styles.message_item}>
							<div className={styles.message_item_title}>图片</div>
							<div className={styles.message_item_image}>
								<img src={SERVICES + dataSource?.service?.photos?.[0]?.url} alt="" />
							</div>
						</div>
						<div className={styles.message_item}>
							<div className={styles.message_item_title}>店铺</div>
							<div className={styles.message_item_info}>OK</div>
						</div>
						<div className={styles.message_item}>
							<div className={styles.message_item_title}>类别</div>
							<div className={styles.message_item_info}>{dataSource?.service?.category}</div>
						</div>
					</section>
				</section>
			</Card>
		</div>
	);
};

export default OrderDetail;
